<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.1.1
Version: 2.0.2
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->

<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en"> <!--<![endif]-->

<!-- Head BEGIN -->
<head>
    <meta charset="utf-8">
    <title>Shopping cart | Metronic Shop UI</title>

    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta content="Metronic Shop UI description" name="description">
    <meta content="Metronic Shop UI keywords" name="keywords">
    <meta content="keenthemes" name="author">

    <meta property="og:site_name" content="-CUSTOMER VALUE-">
    <meta property="og:title" content="-CUSTOMER VALUE-">
    <meta property="og:description" content="-CUSTOMER VALUE-">
    <meta property="og:type" content="website">
    <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
    <meta property="og:url" content="-CUSTOMER VALUE-">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/favicon.ico" rel="SHORTCUT ICON" type="image/ico">

    <!-- Fonts START -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet"
          type="text/css">
    <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=all" rel="stylesheet" type="text/css">
    <!-- Fonts END -->

    <!-- Global styles START -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link href="../bootstrap/js/project/user/shop/shoppingCart/css/bootstrap.min.css" rel="stylesheet">
    <!-- Global styles END -->

    <!-- Page level plugin styles START -->
    <link href="../bootstrap/user/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link href="../bootstrap/user/plugins/bxslider/jquery.bxslider.css" rel="stylesheet">
    <!-- Page level plugin styles END -->

    <!-- Theme styles START -->
    <link href="../bootstrap/user/css/style-metronic.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/style.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/style-responsive.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/custom.css" rel="stylesheet" type="text/css">
    <!-- Theme styles END -->
    <link href="../layui/css/layui.css" rel="stylesheet">
    <style>
        .shopping-cart-data td, .checkout-page td {
            vertical-align: top;
            padding: 10px 20px 20px 0;
            border-bottom: solid 1px #ecebeb;
        }

        .layui-form-select dl dd.layui-this {
            background-color: #e84d1c;
        }
    </style>
</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body>
<div id="wrapper">
    <!-- BEGIN TOP BAR -->
    <div th:include="common/userShopHead :: head"></div>
    <!-- END TOP BAR -->
    <div th:include="common/userShopHead :: head-navigation"></div>
    <!-- BEGIN HEADER -->
    <!--  <div th:include="common/userShopHead :: head-navigation"></div>-->
    <!-- END HEADER -->


    <div class="main">
        <div class="container">
            <!-- BEGIN SIDEBAR & CONTENT -->
            <div class="row margin-bottom-40">
                <!-- BEGIN CONTENT -->
                <div class="layui-form">
                    <form class="form-horizontal" id="myForm" style="padding: 10px 10% 10px 0;" action="">
                        <div class="form-group">
                            <div class="col-sm-2 control-label">我的已存地址</div>
                            <div class="col-sm-10">
                                <select class="form-control" lay-filter="addre">
                                    <option v-for="(item,index) in addressList" :value="item.id">{{item.deliveryAddr}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">收件人</div>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="username" v-model="addressee"
                                       placeholder="收件人" lay-verify="required"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">手机</div>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="phone" placeholder="手机" v-model="phone"
                                       lay-verify="required|phone"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">收货地址</div>
                            <div class="col-sm-10">
                          <textarea type="text" class="form-control"
                                    name="shopExplain"
                                    v-model="deliveryAddr" placeholder="收货地址" lay-verify="required"></textarea>
                            </div>
                        </div>
                    </form>
                    <div class="col-md-12 col-sm-12">
                        <div class="shopping-cart-page">
                            <div class="shopping-cart-data clearfix">
                                <div class="table-wrapper-responsive">
                                    <table summary="Shopping cart111">
                                        <tr>
                                            <th class="shopping-cart-image">图片</th>
                                            <th class="shopping-cart-description" style=" text-align:center; ">商品名字</th>
                                            <th class="shopping-cart-quantity">数量</th>
                                            <th class="shopping-cart-price">单价</th>
                                            <th class="shopping-cart-total" colspan="2">总价</th>
                                        </tr>
                                        <tr v-for="item in shopList">
                                            <td class="shopping-cart-image">
                                                <a href="#"><img
                                                        :src="item.pageaddr+item.saveFileName"
                                                        alt="Berry Lace Dress"></a>
                                            </td>
                                            <td class="shopping-cart-description"
                                                style=" text-align:center;padding: 30px 0 0 0; ">
                                                <span v-text="item.sukChangeName"></span>
                                            </td>
                                            <td class="shopping-cart-quantity" style="padding: 20px 0 0 0;">
                                                <div class="product-quantity">
                                                <span class="input-group-btn"><button
                                                        class="btn quantity-up bootstrap-touchspin-up" type="button"
                                                        @click="addCardNum(item.shopId,item.id)"><i
                                                        class="fa fa-angle-up"></i></button></span>
                                                    <input :id='"product-quantity"+item.shopId' :value="item.cartNum"
                                                           type="text"
                                                           readonly
                                                           class="form-control input-sm" ref="input1" name="text">
                                                    <span class="input-group-btn"><button
                                                            class="btn quantity-down bootstrap-touchspin-down"
                                                            type="button" @click="delCardNum(item.shopId,item.id)"><i
                                                            class="fa fa-angle-down"></i></button></span>
                                                </div>
                                            </td>
                                            <td class="shopping-cart-price" style="padding: 25px 0 0 0;">
                                                <strong><span v-text="item.pirce">¥</span></strong>
                                            </td>
                                            <td class="shopping-cart-total" style="padding: 25px 0 0 0;">
                                                <strong><span v-text="item.amount">¥</span></strong>
                                            </td>
                                            <td class="del-goods-col">
                                                <a class="del-goods" href="#" @click="delCart($event)"
                                                   :name="item.id"><i class="fa fa-times"></i></a>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="shopping-total">
                                    <ul>
                                        <li>
                                            <em>小计</em>
                                            <strong><span id="xiaoji" v-text='"¥"+subtotal'></span></strong>
                                        </li>
                                        <li>
                                            <em>运费</em>
                                            <strong class="price"><span v-text='"¥"+freight'></span></strong>
                                        </li>
                                        <li class="shopping-total-price">
                                            <em>总计</em>
                                            <strong><span v-text='"¥"+total'></span></strong>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <input type="button" class="btn btn-primary" @click="pay" value="提交订单" ref="myelement"
                                   lay-submit/>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>


    <div th:include="common/Head :: brands"></div>

</div>
<!-- END fast view of a product -->
<script src="../layui/layui.js"></script>

<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS (REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="../bootstrap/user/plugins/respond.min.js"></script>
<![endif]-->
<script src="../bootstrap/user/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/back-to-top.js"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/jQuery-slimScroll/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src='../bootstrap/user/plugins/zoom/jquery.zoom.min.js'></script><!-- product zoom -->
<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
<script src="../bootstrap/user/plugins/layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/layerslider/jQuery/jquery-transit-modified.js" type="text/javascript"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<!-- pop up -->
<script type="text/javascript" src="../bootstrap/user/plugins/bxslider/jquery.bxslider.min.js"></script>
<!-- slider for products -->
<script type="text/javascript" src='../bootstrap/user/plugins/zoom/jquery.zoom.min.js'></script><!-- product zoom -->
<script src="../bootstrap/user/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/layerslider/js/layerslider.kreaturamedia.jquery.js"
        type="text/javascript"></script>

<!-- Quantity -->


<script src="../bootstrap/js/dept/js/vue.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/project/search.js"></script>
<script src="../js/shoppingOrder/js/shoppingPurchase.js"></script>
<script type="text/javascript">
    var layer;
    layui.use("layer", function () {
        layer = layui.layer;  //layer初始化

    })
    layui.use('element', function () {
        var element = layui.element;

        //…
    });

    layui.use('form', function () {
        var form = layui.form;
        form.on('select(addre)', function (data) {
            // console.log(data.value); //得到被选中的值
            console.log(vm.addressList)
            for (var i = 0; i < vm.addressList.length; i++) {
                if (vm.addressList[i].id == data.value) {
                    vm.deliveryAddr = vm.addressList[i].deliveryAddr
                    vm.phone = vm.addressList[i].phone
                    vm.addressee = vm.addressList[i].addressee
                }
            }


        });
        //各种基于事件的操作，下面会有进一步介绍
    });


    $(function () {
        $('.brands').css("display", "none");

        $('.search-btn').click(function () {
            if ($('.search-btn').hasClass('show-search-icon')) {
                if ($(window).width() > 767) {
                    $('.search-box').fadeOut(300);
                } else {
                    $('.search-box').fadeOut(0);
                }
                $('.search-btn').removeClass('show-search-icon');
            } else {
                if ($(window).width() > 767) {
                    $('.search-box').fadeIn(300);
                } else {
                    $('.search-box').fadeIn(0);
                }
                $('.search-btn').addClass('show-search-icon');
            }
        });
    })

</script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>